﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>SimpleCustomerInfoQuery sample</title>
    <script language="javascript" type="text/javascript" src="../../Script/GrammarIntelliForJS.js"></script>
    <script language="javascript" type="text/javascript" src="../../Script/GrammarIntelliForJsUIHelper.js"></script>
    <script language="javascript" type="text/javascript">
        var oGIMachine = new GIMachine("SimpleCustomerInfoQuery"), oCustomerCheckState = null, oUIHelper = null, oForState = null;
        
        // Create the last state first, so that we can "attach" it while forming the literal ones
        oCustomerCheckState = new GIMachineWordState("^[a-zA-Z]+$" /* Pattern */,
                                                     false /* This is not a literal text/pattern */,
                                                     3 /*can be any number for tracking*/,
                                                     "CustomerName" /*This name will can be used to capture result*/,
                                                     true /* final state of the query */);
        oGIMachine.States[0] = new GIMachineWordState("show", true, 0, "", false);
        oGIMachine.States[0].NextStates[0] = new GIMachineWordState("info", true, 0, "", false); 
        oGIMachine.States[0].NextStates[1] = new GIMachineWordState("detail", true, 0, "", false);
        oGIMachine.States[0].NextStates[2] = new GIMachineWordState("information", true, 0, "", false);
        oForState = new GIMachineWordState("for", true, 0, "", false);
        oForState.NextStates[0] = oCustomerCheckState;
        oGIMachine.States[0].NextStates[0].NextStates[0] = oForState;
        oGIMachine.States[0].NextStates[1].NextStates[0] = oForState;
        oGIMachine.States[0].NextStates[2].NextStates[0] = oForState;
        

        function ShowMachineInfo() {
            var oInputControl = document.getElementById("txtUserInput");
            oUIHelper = new GIUIHelper(oInputControl, oGIMachine);
            oUIHelper.Initialize();

            // In case you want to customize the size of suggestions box ..like assigning a css classname or setting width ..here's how you can do
            
        }

        function ParseText() {
            oUIHelper.Hide();
            var sText = document.getElementById("txtUserInput").value, oDiv = document.getElementById("divSuggestions"), oTrace = document.getElementById("txtOutput"), oMatchCollection = null;
            //oMatchCollection = oGIMachine.ProcessText(sText, oTrace);
            oMatchCollection = oGIMachine.ProcessText(sText);

            if (oMatchCollection != null) {
                var sCustomerName = "";
                oTrace.value = oMatchCollection.ToXML();

                // Now, its time to get the result ... lets capture the "CustomerName" that user entered
                sCustomerName = oMatchCollection.NamedMatches["CustomerName"].Value;
                // At this point you can do whatever you want with the data ... we'r just displaying it off.
                oDiv.innerHTML = "Result: Captured customerName = '<b>" + sCustomerName + "'</b>";
            } else {
                oTrace.value = "No matches...";
            }
        }
        
    </script>
</head>
<body onload="ShowMachineInfo();">
    <h1>Simple Customer Info Query Using GrammarIntelliForJsUIHelper.js - Sample</h1>
    <h4>GrammarIntelliForJsUIHelper.js makes it much simpler to attach a GIMachine to a text box for intellisense. It attaches a basic suggestion list view dyanmically to the textbox</h4>
    <h3>Try typing according to pattern: <font color="blue"><i>show (info|detail|information) for &lt;CustomerName&gt;</i></font></h3>
    <h4>Use Esc to hide suggestion, Up/Down arrow to traverse suggestions, Enter to select a suggestion. You can also use mouse</h4>
    <input type="text" id="txtUserInput" size="60" />&nbsp;<input type="button" value="Parse" onclick="ParseText();" /><br />
    <div id="divSuggestions"></div>
    
    <textarea id="txtOutput" rows="30" cols="80"></textarea>
</body>
</html>
